<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    #main {
      width: 1200px;
      height: 800px;
    }
  </style>
</head>

<body>
  <div id="main"></div>
  <script src="./index.js"></script>
  <script src="./theme.js"></script>
  <script>
    echarts.registerMap('china', china)
    echarts.registerTheme('aaa', theme)
    const myEcharts = echarts.init(document.getElementById('main'), 'aaa')
    const option = {
      title: {
        text: '我是主标题',
        textStyle: {
          color: '#f00',
          fontWeight: 'bolder'
        },
        subtext: '我是副标题',
        triggerEvent: true
      },
      legend: {},
      xAxis: {
        data: ['衣服', '裤子', '鞋']
      },
      yAxis: {
        // data: []
      },
      series: [
        {
          name: '总件数',
          type: 'pie',
          smooth: true,
          label: {
            show: true,
            formatter: [
              '{b}{a}',
              '{a|{c}}件'
            ].join('\n'),
            rich: {
              a: {
                color: '#f00'
              }
            }
          },
          data: [
            120, 132, 101
          ]
        },
        // {
        //   name: '总件数',
        //   type: 'bar',
        //   smooth: true,
        //   label: {
        //     show: true,
        //     formatter: [
        //       '{b}{a}',
        //       '{a|{c}}件'
        //     ].join('\n'),
        //     rich: {
        //       a: {
        //         color: '#f00'
        //       }
        //     }
        //   },
        //   data: [
        //     10, 62, 80
        //   ]
        // }, {
        //   name: '总件数',
        //   type: 'bar',
        //   smooth: true,
        //   label: {
        //     show: true,
        //     formatter: [
        //       '{b}{a}',
        //       '{a|{c}}件'
        //     ].join('\n'),
        //     rich: {
        //       a: {
        //         color: '#f00'
        //       }
        //     }
        //   },
        //   data: [
        //     10, 62, 80
        //   ]
        // }, {
        //   name: '总件数',
        //   type: 'pie',
        //   radius: ['50%', '75%'],
        //   label: {
        //     show: true,
        //     formatter: [
        //       '{b}{a}',
        //       '{a|{c}}件'
        //     ].join('\n'),
        //     rich: {
        //       a: {
        //         color: '#f00'
        //       }
        //     }
        //   },
        //   data: [
        //     10, 62, 80
        //   ]
        // }
      ],
      tooltip: {
        show: true,
        formatter: '123'
      },
      color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
    }
    console.log(china)
    // const option = {
    //   title: {
    //     text: '我是主标题',
    //     textStyle: {
    //       color: '#f00',
    //       fontWeight: 'bolder'
    //     },
    //     subtext: '我是副标题',
    //     triggerEvent: true
    //   },
    //   legend: {},
    //   // xAxis: {
    //   //   data: ['衣服', '裤子', '鞋']
    //   // },
    //   // yAxis: {
    //   //   // data: []
    //   // },
    //   tooltip: {
    //     trigger: 'item',
    //     showDelay: 0,
    //     transitionDuration: 0.2
    //   },
    //   series: [
    //     {
    //       type: 'map',
    //       map: 'china',
    //       label: {
    //         show: true
    //       },
    //       data: china.features.map((item, index) => ({ name: item.properties.name, value: index * 30, })),
    //       tooltip: {
    //         formatter: '{b}:{c}'
    //       }
    //     }
    //   ],
    //   visualMap: [
    //     {
    //       type: 'piecewise',
    //       pieces: [
    //         {
    //           min: 0, max: 100, color: 'blue', label: '<100'
    //         }, {
    //           min: 100, max: 300, color: 'green', label: '100-300'
    //         }, {
    //           min: 300, max: 500, color: 'orange', label: '300-500'
    //         }, {
    //           min: 500, color: 'red', label: '>500'
    //         }
    //       ]
    //     }
    //   ]
    // }
    myEcharts.setOption(option)

    myEcharts.on('click', 'title', () => {
      console.log('title click')
    })
  </script>
</body>

</html>